<template>
  <!-- 一行一列 -->
  <view v-if="props.ticketStyleType == 1" @click="emits('click', props.item)" w-full flex items-center mb-60rpx>
    <image mode="aspectFill" w-240rpx h-240rpx rounded-20rpx mr-30rpx shrink-0 :src="props.item.goodsImg"></image>
    <view w-full h-240rpx flex flex-col justify-between>
      <view line-clamp-1 break-all text-32rpx font-bold line-height-none>{{ props.item.goodsName }}</view>
      <view line-clamp-2 break-all text-24rpx mt-30rpx>{{ props.item.sellPoint }}</view>
      <view mt-10rpx flex overflow-x-auto w-400rpx style="white-space: nowrap">
        <view
          h-40rpx
          px-20rpx
          box-border
          rounded-20rpx
          bg="#FCC300"
          text="#000"
          text-20rpx
          flex
          justify-center
          items-center
          mr-20rpx
          shrink-0>
          {{ props.item.goodsType == 1 ? '电子票' : '智能卡' }}
        </view>
        <view
          v-if="props.item.labelName1"
          h-40rpx
          px-10rpx
          box-border
          rounded-20rpx
          bg="#EEEEEE"
          text="#484848"
          text-20rpx
          flex
          justify-center
          items-center
          mr-20rpx
          shrink-0>
          {{ props.item.labelName1 }}
        </view>
        <view
          v-if="props.item.labelName2"
          h-40rpx
          px-10rpx
          box-border
          rounded-20rpx
          bg="#EEEEEE"
          text="#484848"
          text-20rpx
          flex
          justify-center
          items-center
          mr-20rpx
          shrink-0>
          {{ props.item.labelName2 }}
        </view>
        <view
          v-if="props.item.labelName3"
          h-40rpx
          px-10rpx
          box-border
          rounded-20rpx
          bg="#EEEEEE"
          text="#484848"
          text-20rpx
          flex
          justify-center
          items-center
          mr-20rpx
          shrink-0>
          {{ props.item.labelName3 }}
        </view>
      </view>
      <view w-full mt-10rpx flex justify-between items-end>
        <view text="#7D7D7D" text-20rpx font-bold>
          已售{{ props.item.salesNumber <= 1000 ? props.item.salesNumber : '1000+' }}
        </view>
        <view flex items-end text="#D03939" font-bold>
          <view mb-6rpx text-20rpx>¥</view>
          <view text-36rpx>{{ props.item.goodsPrice }}</view>
        </view>
      </view>
    </view>
  </view>
  <!-- 一行两列 -->
  <view v-if="props.ticketStyleType == 2" @click="emits('click', props.item)" w-320rpx mb-60rpx overflow-hidden>
    <image mode="aspectFill" w-320rpx h-320rpx rounded-20rpx shrink-0 :src="props.item.goodsImg"></image>
    <view line-clamp-1 break-all text-32rpx font-bold mt-20rpx>{{ props.item.goodsName }}</view>
    <view mt-10rpx flex overflow-x-auto w-320rpx style="white-space: nowrap">
      <view
        h-40rpx
        px-20rpx
        box-border
        rounded-20rpx
        bg="#FCC300"
        text="#000"
        text-20rpx
        flex
        justify-center
        items-center
        mr-20rpx
        shrink-0>
        {{ props.item.goodsType == 1 ? '电子票' : '智能卡' }}
      </view>
      <view
        v-if="props.item.labelName1"
        h-40rpx
        px-10rpx
        box-border
        rounded-20rpx
        bg="#EEEEEE"
        text="#484848"
        text-20rpx
        flex
        justify-center
        items-center
        mr-20rpx
        shrink-0>
        {{ props.item.labelName1 }}
      </view>
      <view
        v-if="props.item.labelName2"
        h-40rpx
        px-10rpx
        box-border
        rounded-20rpx
        bg="#EEEEEE"
        text="#484848"
        text-20rpx
        flex
        justify-center
        items-center
        mr-20rpx
        shrink-0>
        {{ props.item.labelName2 }}
      </view>
      <view
        v-if="props.item.labelName3"
        h-40rpx
        px-10rpx
        box-border
        rounded-20rpx
        bg="#EEEEEE"
        text="#484848"
        text-20rpx
        flex
        justify-center
        items-center
        mr-20rpx
        shrink-0>
        {{ props.item.labelName3 }}
      </view>
    </view>
    <view flex items-end mt-20rpx text="#D03939" font-bold>
      <view mb-6rpx text-20rpx>¥</view>
      <view text-36rpx>{{ props.item.goodsPrice }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    item: any
    ticketStyleType: any
  }>(),
  {
    item: {}, // 默认值为一个空对象
    ticketStyleType: '1' // 默认值为字符串
  }
)
const emits = defineEmits(['click'])

onMounted(() => {})
</script>

<style scoped lang="scss"></style>
<style>
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
